<template>
  <div class="loginPage">
    <div class="loginTitle">
      <span>尼玛县国土空间信息基础平台</span>
    </div>
    <div class="loginContent">
      <Input
        placeholder="用户名："
        element-id="contInputName"
        v-model="inputName"
        :border="false"
      >
        <Icon type="ios-contact" slot="prefix" style="line-height: 55px" />
      </Input>
      <Input
        placeholder="密    码："
        element-id="contInputPass"
        type="password"
        v-model="inputPass"
        :border="false"
      >
        <Icon type="ios-eye-off" slot="prefix" style="line-height: 55px" />
      </Input>
    </div>
    <div class="loginButton">
      <Button type="primary" class="btnStyle" @click="login">登录</Button>
    </div>
  </div>
</template>

<script>
import config from "../config";
// import axios2 from "../plugins/axios";
// import qs from 'qs';
export default {
  name: "login",
  data() {
    return {
      inputName: "fgmi_mnr",
      inputPass: "cc.123456",
    };
  },
  methods: {
    mainLogin(name, pass) {
      this.axios
        .post("/login", { username: name, password: pass })
        .then((res) => {
          console.log(res);
          if (res.data.msg === "登录成功！") {
            sessionStorage.setItem("name", name);
            sessionStorage.setItem("token", res.data.data);
            this.$router.push("/yzt");
            this.getUserMsg(name);
          } else {
            this.$Message.warning({
              background: true,
              content: res.data.msg,
              duration: 3,
            });
          }
        });
    },
    login() {
      if (this.inputName == "" || this.inputPass == "") {
        this.$Message.info("请输入用户名密码");
      } else {
        this.mainLogin(this.inputName, this.inputPass);
      }
    },
    getUserMsg(name) {
      this.axios.get("/user/" + name).then((res) => {
        if (res.data.code == 200) {
          let temp = JSON.stringify(res.data.data);
          sessionStorage.setItem("selfInfo", temp);
          this.setPortalCookie();
        } else {
          this.$Message.info("用户信息错误！");
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("selfInfo");
          location.reload("/login");
        }
      });
    },
    setPortalCookie() {
      let self = this;
      this.$.post(
        config.portalConfig.portalRestPreUrl + "generateToken",
        {
          username: self.inputName,
          password: self.inputPass,
          referer: "https://geoplan.fgmin.mnr/",
          expiration: 60,
          f: "json",
        },
        (tokenForViewr) => {
          self.$.post(
            config.portalConfig.portalRestPreUrl + "generateToken",
            {
              username: self.inputName,
              password: self.inputPass,
              referer: location.host,
              expiration: 60,
              f: "json",
            },
            (res_dataToken) => {
              sessionStorage.setItem("portalToken", res_dataToken.token);

              self.$.post(
                "https://geoplan.fgmin.mnr/arcgis/sharing/rest/community/self",
                { token: res_dataToken.token, f: "json" },

                (resInfo) => {
                  console.log(resInfo);

                  let authCookie = {
                    portalApp: true,
                    email: resInfo.username,
                    token: tokenForViewr.token,
                    expires: tokenForViewr.expires,
                    allSSL: false,
                    persistent: false,
                    created: resInfo.created,
                    culture: resInfo.culture,
                    region: resInfo.region,
                    accountId: resInfo.orgId,
                    role: "org_admin",
                    customBaseUrl: "geoplan.fgmin.mnr/arcgis",
                  };
                  console.log(authCookie);
                  self.$cookies.set("esri_auth", authCookie);
                  self.$cookies.set(
                    "agwtoken",
                    tokenForViewr.token,
                    "60m",
                    "/portal/sharing"
                  );
                }
              );
            }
          );
        }
      );
      //#region
      // axios2.post(config.portalConfig.portalRestPreUrl + "generateToken", qs.stringify({
      //   username: this.inputName,
      //   password: this.inputPass,
      //   referer: location.host,
      //   expiration: 60,
      //   f: "json",
      // })).then(res => {
      //   sessionStorage.setItem("portalToken", res.data.token);
      //     let authCookie = {
      //       portalApp: true,
      //       token: res.data.token,
      //       role: "org_admin"
      //     };
      //     this.$cookies.set("esri_auth", authCookie);
      //     this.$cookies.set("agwtoken", res.data.token, "60m", "/portal/sharing");
      //     console.log(this.$cookies.get("agwtoken"))
      // });
      //#endregion
    },
  },
};
</script>

<style>
.loginContent .ivu-input:hover {
  border: 1px solid rgba(0, 72, 84, 0.6) !important;
  box-shadow: 2px 2px 4px rgb(25, 38, 43) !important ;
}
</style>
<style scoped>
.ivu-btn-primary {
  background: rgba(0, 63, 84, 0.9) !important;
  border-color: rgb(0, 63, 84) !important;
  box-shadow: 2px 2px 2px rgb(25, 38, 43) !important;
}

.loginPage {
  width: 100%;
  background-image: url("../assets/login/earth_big.png");
  background-position: center center;
  animation: zoom 25s infinite alternate;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@keyframes zoom {
  0% {
    background-size: 100% 100%;
  }
  40% {
    background-image: url("../assets/login/earth_small.png");
    background-size: 140% 140%;
  }
  100% {
    background-image: url("../assets/login/earth_small.png");
    background-size: 200% 200%;
  }
}
.loginTitle {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
/**E > F 表示选bai择E元素du的所有子F元素，与E F的区别在zhi于，E F选择所有后dao代元素，>只选择一代。 没有<的用法。 */
.loginTitle > span {
  font-size: 42px;
  font-family: AlibabaPuHuiTiM;
  color: rgb(255, 255, 255);
  text-shadow: 0px 2px 2px rgba(37, 39, 39, 0.8);
}
.loginContent {
  width: 334px;
  height: 110px;
  border-radius: 4px;
  margin-top: 5%;
}
.loginButton {
  width: 334px;
  height: 42px;
  box-shadow: 0px 2px 8px 0px rgba(74, 74, 74, 0.15);
  border-radius: 4px;
  margin-top: 30px;
}
.btnStyle {
  height: 100%;
  width: 100%;
}
/*/deep/为子代 添加唯一标识，防止样式不好用 */
.loginPage /deep/ #contInputName,
.loginPage /deep/ #contInputPass {
  height: 55px;
  background: rgba(0, 63, 84, 0.7);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 1);
}
</style>
